<template>
    <div class="base-app-login-box">
        <el-form ref="ruleFormRef" class="login-form" :model="ruleForm" status-icon :rules="rules" label-width="auto">
            <el-form-item>
                <div class="login-header">
                    <el-image style="width: 60px; height: 60px" :src="Logo" fit="scale-down" />
                    <div class="des">qiankun微前端</div>
                </div>
            </el-form-item>
            <el-form-item label="账号" prop="account">
                <el-input v-model="ruleForm.account" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <div class="btn-groups">
                    <el-button type="primary" :loading="loading" @click="submitForm(ruleFormRef)">登录</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import Logo from '@/assets/image/logo.png';
import { login } from '@/api';
import { setUserOfLocalStorage } from '@package/shared/utils'
import { useRouter } from 'vue-router'
const ruleFormRef = ref<FormInstance>();
const checkAccount = (_rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('请输入账号'));
    } else {
        callback();
    }
}

const validatePass = (_rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'));
    } else {
        callback();
    }
}

const ruleForm = reactive({
    pass: '',
    account: '',
})

const rules = reactive<FormRules<typeof ruleForm>>({
    pass: [{ validator: validatePass, trigger: 'blur' }],
    account: [{ validator: checkAccount, trigger: 'blur' }],
})
const router = useRouter();
const loading = ref(false);
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    //@ts-ignore
    formEl.validate(async (valid) => {
        if (valid) {
            loading.value = true;
            const { result } = await login(ruleForm);
            loading.value  = false;
            if(result){ 
                // 登录成功后获取用户新（基础信息写入浏览器本地缓存中）
                setUserOfLocalStorage(result);
                router.push({
                    path: '/'
                })
            }
        } else {
            return false;
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
}
</script>

<style lang="scss" scoped>
.base-app-login-box {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background: linear-gradient(to bottom, #33c4f5 0%, #f9a2ce 100%);
    .login-form {
        min-width: 40em;
        box-sizing: border-box;
        padding: 2em;
        box-shadow: rgb(220, 233, 230) 0px 0px 0px 0.1em inset;
        background-color: #fff;
        border-radius: 0.8em;

        .btn-groups {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        .login-header {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            .des{
                padding: 0 2em;
                font-size: 2em;
            }
        }
    }
}
</style>
  